<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**
     * window.onload() = function() {}
     * 或
     * window.addEventListener('load', function(){})
     * #
     * window.onload是窗口(页面)加载事件, 当文档内容完全加载完成后会触发该事件(包括图形、脚本文件、CSS文件等), 就调用的处理函数
     * 注意:
     * 1.有了window.onload就可以把JS代码写到页面元素的上方,
     *  因为onload是等页面内容完全加载完毕, 在去执行处理函数
     * 2.window.onload传统注册祖册方式只能写一次, 如果有多个, 会以最后一个window.onload为准
     * 3.如果使用 addEventListener 则没有限制
     */
    window.onload = function () {
        // 这个获取 btn 元素, 不能写在 window.onload的外面, 否则下面的效果就实现不了
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert('点击我');
        })
    }

    window.onload = function () {
        alert('点击我2222');
    }

    /**
     * load 等页面内容全部加载完毕, 包含页面DOM元素, 图片 flash css等等
     * DOMContentLoaded 是DOM加载完毕, 不包含图片 flash css 等就可以执行, 加载速度比load快点
     * #
     * 使用场景: 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长时间,
     * 交互效果就不能实现, 必然影响用户体验, 此时用DOMContentLoaded事件比较合适
     *
     */
    document.addEventListener('DOMContentLoaded', function () {
        alert('11111')
    })
</script>

<button>点击</button>

</body>
</html>
